/*
 * @Author: your name
 * @Date: 2022-01-16 18:29:13
 * @LastEditTime: 2022-03-25 17:51:47
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \web\src\components\header\index.jsx
 */
import React from "react";
import "./index.css";
import Cookie from "../../assets/common/cookie";
import { Menu, Dropdown, message } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const Header = React.memo(() => {
  const userInfo = Cookie.get('userInfo') ? JSON.parse(Cookie.get('userInfo')): '';
  const remove = () => {
    Cookie.remove('token');
    Cookie.remove('userInfo');
    message.success('退出成功',1.5);
    window.location.href = 'http://localhost:3000';
  }
  const menu = (
    <Menu>
      <Menu.Item danger><span  onClick={()=>{remove()}}>&nbsp;&nbsp;&nbsp;  退出  &nbsp;&nbsp;&nbsp;</span></Menu.Item>
    </Menu>
  );
  
  return (
    <div id="header">
      <div className="logo l"></div>
      <div className="text l"><em>才华是刀刃，辛苦是磨刀石，很锋利的刀刃，若日久不用磨，也会生锈，成为废物。</em></div>
      <div className="state r">
        {userInfo.username ? <Dropdown overlay={menu} placement="bottomRight">
          <span className="ant-dropdown-link" onClick={e => e.preventDefault()}>
            {userInfo.username} <DownOutlined />
          </span>
        </Dropdown> : '请登录'}
      </div>
    </div>
  );

});

export default Header;
